<!--
 * @description  : 证据录入
 * @descriptionDetail: 证据录入
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-09 18:43:02
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :isWhite="true" backText="返回" :title="typeInfo.typeName"></theme-navbar>
    <!-- #endif -->
    <view class="content">
      <view class="info-content">
        <view class="info-box">
          <u-form :model="evidenceForm" :rules="rules" :errorType="errorType" ref="uForm">
            <u-form-item label="证据类型" :required="isTrue" prop="evidType" :label-position="labelPosition">
              <u-input :border="border" type="select" :select-open="selectShow" placeholder="请选择" v-model="evidenceForm.evidTypeName" @click="selectShow = true"></u-input>
              <u-select mode="single-column" label-name="text" :list="evidTypeList" v-model="selectShow" @confirm="selectConfirm($event,'evidType')"></u-select>
            </u-form-item>
            <view v-show="evidenceForm.evidType">
              <u-form-item label="图片类型" :required="isTrue" prop="explainItem" :label-position="labelPosition">
                <u-input :border="border" placeholder="请输入" v-if="isEvidTypeOther" v-model="evidenceForm.explainItem"></u-input>
                <u-input :border="border" type="select" :select-open="selectPhotoShow" placeholder="请选择" v-if="!isEvidTypeOther" v-model="evidenceForm.explainItemName" @click="selectPhotoShow = true"></u-input>
                <u-select mode="single-column" label-name="text" :list="explainItemList" v-model="selectPhotoShow" @confirm="selectConfirm($event,'explainItem')"></u-select>
              </u-form-item>
              <u-form-item label="证据来源" :required="isTrue" prop="evidenceSource" :label-position="labelPosition">
                <u-input :border="border" placeholder="请输入" v-if="isEvidTypeOther" v-model="evidenceForm.evidenceSource"></u-input>
                <u-input :border="border" type="select" :select-open="selectOrignShow" placeholder="请选择" v-if="!isEvidTypeOther" v-model="evidenceForm.evidenceSourceName" @click="selectOrignShow = true"></u-input>
                <u-select mode="single-column" label-name="text" :list="evidenceSourceList" v-model="selectOrignShow" @confirm="selectConfirm($event,'evidenceSource')"></u-select>
              </u-form-item>
              <u-form-item label="提取方法" :required="isTrue" prop="extractMethod" :label-position="labelPosition">
                <u-input :border="border" type="select" :select-open="selectMethodShow" placeholder="请选择" v-model="evidenceForm.extractMethodName" @click="selectMethodShow = true"></u-input>
                <u-select mode="single-column" label-name="text" :list="extractMethodList" v-model="selectMethodShow" @confirm="selectConfirm($event,'extractMethod')"></u-select>
              </u-form-item>
            </view>
            <u-form-item label="上传附件" :required="isTrue" prop="fileList" :label-position="labelPosition">
              <m-upload
                :deletable="typeInfo.type!='view'
                  ?true:false"
                width="150rpx"
                height="150rpx" 
                :file-list="officialPicList"
                :multiple="true"
                index="officialPicList"
                :uploadParam="{'fiGroupCode':$FILE_GROUP_TYPE.c_evid_copy_attr}"
                upApiUrl="uploadBase64File"
                ref="officialPicUpload"				
                @on-list-change="changeUpload"
              >
              </m-upload>
            </u-form-item>
          </u-form>
        </view>
      </view>      
      <view class="space-content"></view>
      <u-button plain class="flat-btn" type="primary" v-if="typeInfo.type!='view'" @click="confirmHandle">
        确定
      </u-button>
    </view>
  </view>
</template>

<script>
import common from "@/components/commonMixins.js";
import caseService from '@/service/case/case.service.js';
import mUpload from '@/components/m-upload.vue';
export default{
  components:{
    mUpload,
  },
  mixins: [common,],
  data() {
    return {
      rules:{
        // 类型选择
        evidType: [{
          required: true,
          message: '请选择类型',
          trigger: ['change', 'blur',],
        },],
        explainItem:[{
          required: true,
          message: '请设置类型',
          trigger: ['change', 'blur',],
        },],
        evidenceSource:[{
          required: true,
          message: '请设置类型',
          trigger: ['change', 'blur',],
        },],
      },
      errorType: ['border-bottom','message',],
      isTrue:true,
      labelPosition:"top",
      border: false,
      selectShow:false,
      selectPhotoShow:false,
      selectOrignShow:false,
      selectMethodShow:false,
      evidTypeList:[],
      explainItemList:[],
      evidenceSourceList:[],
      extractMethodList:[],
      officialPicList:[], // 存放图片列表
      hasDelBtn:false,
      isDisabled:false, // 表单页面禁用
      typeInfo:{},
      caseCode:'',
      evidenceForm:{},
      isEvidTypeOther:false,
    }
  },
  mounted() {
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  // 加载初始周期方法
  onLoad() {
    let preParams = this.getRouteParam();
    if(preParams){
      this.officialPicList = preParams.fileList;
      if(preParams.evidType == '06'){
        this.isEvidTypeOther = true;
      }
      this.evidenceForm = preParams;
      this.getSeleList(this.evidenceForm.evidType);
    }
    this.initData();
  },
  methods: {
    initData(){
      caseService.getEvidenceOptions({},'C_EVID_PHOTO_TYPE').then(res => {
        this.evidTypeList = res.data;
      })
    } ,
    getSeleList(extValue){
      Promise.all([
        caseService.getEvidenceOptions({},'C_PHOTO_TYPE','ext1',extValue),
        caseService.getEvidenceOptions({},'C_EVID_SOURCE','ext1',extValue),
        caseService.getEvidenceOptions({},'C_EVID_EXTRACT_METHOD','ext1',extValue),
      ]).then(res => {
        this.explainItemList = res[0].data;
        this.evidenceSourceList = res[1].data;
        this.extractMethodList = res[2].data;
      });  
    },
    selectConfirm(e,type) {
      let name = `${type}Name`;
      let extValue = '';
      e.map((val, index) => {
        extValue = val.value
        this.evidenceForm[name] = val.label;
        this.evidenceForm[type] = val.value;
      });
      if(type === 'evidType'){
        this.isEvidTypeOther = e[0].value == '06' ? true : false;
        this.getSeleList(extValue);
        this.evidenceForm.explainItem = '';
        this.evidenceForm.explainItemName = '';
        this.evidenceForm.evidenceSource = '';
        this.evidenceForm.evidenceSourceName = '';
        this.evidenceForm.extractMethod = '';
        this.evidenceForm.extractMethodName = '';
      }
    },
    // 上传/删除图片事件
    changeUpload(list, key){
      if(list.length > 0){
        this.officialPicList = [...list,];
      }else{
        this.officialPicList = [];
      }
    },
    // 确定
    confirmHandle(){
      let files = [];
      this.officialPicList.forEach(item => {
        files.push(item);
      });
      let selfs = this;
      if(this.evidenceForm.evidType == '06'){
        this.evidenceForm.explainItemName = this.evidenceForm.explainItem;
        this.evidenceForm.evidenceSourceName = this.evidenceForm.evidenceSource;
      }
      this.evidenceForm.fileList = files;
      this.$refs.uForm.validate(valid => {
        if (valid) { 
          if(files.length == 0){
            this.$u.toast('请上传图片');
            return;
          }
          selfs.backPrev({
            paramKey: "formItem",
            param : {
              obj:this.evidenceForm,
              type:'save',
            },  
          });
        } else {
          console.log('表单验证失败');
        }
      });
    },
  },
	
}
</script>

<style lang="scss" scoped>
	@import "../case_common.scss";
	.content{
		.info-content{
			padding: 10px 16px 16px;	
			.zj-photo-content{
				min-height: 80px;
				.photo-item{
					padding: 10px;
				}
			}
		}	
	}
</style>
